<template>
  <div>
    <div class='article_item'>
      <div class='article_head'>
        <slot name='article_title'></slot>
        <span class='publish_time'>{{data.pubtime}}</span>
      </div>
      <div class='article_abstract'>
        <div v-html='data.content' v-if='this.$route.params.id'></div>
        <div v-html='data.description' v-else ></div>
      </div>
      <div class='article_info'>
        <slot name='articleInfo'></slot>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: ['data'],
    data() {
      return {
        heartShow: true,
        showLgoin: false
      }
    },
    components: {
      // LoginPage
    },
    methods: {

    }
  }
</script>

<style scoped>
.article_item {
  width: 100%;
  color: #999;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #2f2f2f;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 15px;
  box-shadow: 4px 4px 18px rgba(0,0,0,0.46);
}
/* 头部 */
.article_head {
  width: 100%;
  position: relative;
}
/* 标题 */
.article_head>h2 {
  width:100%;
  text-align: left;
  line-height: 45px;
  word-wrap:break-word;
  word-break:break-all;
}
/* 发表时间 */
.article_head .publish_time {
  position: absolute;
  right: 5px;
  bottom: -3px;
  font-size: 12px;
}
/* 摘要 */
.article_abstract {
  width: 100%;
  border-top: 3px solid #2f2f2f;
  padding-top: 5px;
  margin-top: 5px;
  box-sizing: border-box;
  word-wrap:break-word;
  word-break:break-all;
  overflow: hidden;
}
.article_info {
  width: 100%;
  margin-top: 10px;
}
.article_info_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 12px;
}
.article_info .article_info_list>li {
  margin-right: 5px;
}
</style>
